<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="page-container bg-gradient-to-b from-orange-500 to-white min-h-screen pb-20">
    <view class="relative">
      <image
        src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
        alt="商家图片"
        class="w-full h-64 object-cover"
        ref="merchantImage"
      />

      <view class="absolute bottom-0 left-0 right-0 bg-black/50 view p-2 text-white">
        <view class="text-xl font-bold">优质商家名称</view>
      </view>
    </view>

    <view
      class="sticky top-0 z-10 bg-orange-500 text-white view p-2 transition-opacity duration-300"
      :class="{ 'opacity-0 pointer-events-none': !isHeaderSticky, 'opacity-100': isHeaderSticky }"
    >
      <view class="text-xl font-bold">优质商家名称</view>
    </view>

    <view class="p-4 my-6">
      <view class="border border-gray-200 rounded-lg view p-2 bg-white shadow-sm">
        <view class="text-lg font-bold text-gray-800 mb-3">服务内容</view>
        <view class="text-base text-gray-700 leading-relaxed">
          我们提供专业的服务，包括但不限于以下内容：专业咨询、个性化定制方案、全程跟踪服务、售后保障等。我们的团队拥有多年经验，致力于为客户提供最优质的服务体验。无论您有什么需求，我们都将竭诚为您服务，确保您的满意度。
        </view>
        <view class="text-base text-gray-700 leading-relaxed mt-3">
          服务时间：周一至周日
          9:00-21:00，节假日不休息。预约服务请提前24小时联系我们，我们将为您安排专业的服务人员。
        </view>
      </view>
    </view>

    <view class="p-4 my-6">
      <view class="text-lg font-bold text-gray-800 mb-3">联系人信息</view>
      <view class="flex items-center bg-white view p-2 rounded-lg shadow-sm">
        <image
          src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
          alt="联系人头像"
          class="w-16 h-16 rounded-full object-cover mrp-4"
        />
        <view class="flex-1">
          <view class="font-medium text-gray-800">张经理</view>
          <view class="flex items-center mt-1">
            <Phone class="wp-4 hp-4 text-orange-500 mr-2" />
            <text class="text-gray-700">138-8888-8888</text>
          </view>
        </view>
      </view>
    </view>

    <view class="p-4 my-6">
      <view class="bg-white rounded-lg view p-2 shadow-sm">
        <view class="text-lg font-bold text-gray-800 mb-3">商家简介</view>
        <view class="text-base text-gray-700 leading-relaxed">
          我们是一家成立于2010年的专业服务机构，拥有一支经验丰富的团队，致力于为客户提供高质量的服务。多年来，我们已经服务了上千位客户，获得了广泛的好评和认可。我们的宗旨是"客户至上，服务第一"，希望通过我们的专业能力，为每一位客户创造价值。
        </view>
      </view>
    </view>

    <view class="p-4 my-6">
      <view class="text-lg font-bold text-gray-800 mb-3">客户评价</view>
      <view class="space-y-3">
        <view class="bg-white rounded-lg view p-3 shadow-sm">
          <view class="flex items-center mb-2">
            <image
              src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
              alt="客户头像"
              class="w-8 h-8 rounded-full object-cover mr-2"
            />
            <text class="font-medium text-gray-800">李先生</text>
            <view class="flex ml-auto">
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
            </view>
          </view>
          <view class="text-sm text-gray-700">
            服务非常专业，态度很好，解决了我的所有问题，非常满意！
          </view>
        </view>
        <view class="bg-white rounded-lg view p-3 shadow-sm">
          <view class="flex items-center mb-2">
            <image
              src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
              alt="客户头像"
              class="w-8 h-8 rounded-full object-cover mr-2"
            />
            <text class="font-medium text-gray-800">王女士</text>
            <view class="flex ml-auto">
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-orange-500 fill-orange-500" />
              <Star class="wp-4 hp-4 text-gray-300" />
            </view>
          </view>
          <view class="text-sm text-gray-700">
            整体服务不错，就是预约时间有点长，希望能改进一下。
          </view>
        </view>
      </view>
    </view>

    <view class="p-4 my-6">
      <view class="text-lg font-bold text-gray-800 mb-3">热门商品</view>
      <view class="space-y">
        <view
          v-for="(product, index) in products"
          :key="index"
          class="flex bg-white rounded-lg mb-2 shadow-md overflow-hidden"
        >
          <image :src="product.image" :alt="product.name" class="w-28 h-28 object-cover" />
          <view class="flex-1 view p-3 flex flex-col justify-between">
            <view class="font-medium text-gray-800 line-clamp-2">{{ product.name }}</view>
            <view class="text-orange-600 font-bold">¥{{ product.price }}</view>
            <view class="text-xs text-gray-500">已售 {{ product.sales }}</view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="fixed bottom-0 left-0 right-0 view p-2 bg-white shadow-lg border-t border-gray-200"
    >
      <view
        class="text-center bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 p-2 rounded-lg transition-colors"
        @click="openBottomSheet"
      >
        立即预约
      </view>
    </view>

    <view
      v-if="isBottomSheetVisible"
      class="fixed inset-0 bg-black/50 z-20 transition-opacity duration-300"
      :class="{ 'opacity-0': !isBottomSheetVisible, 'opacity-100': isBottomSheetVisible }"
      @click="closeBottomSheet"
    ></view>

    <view
      class="fixed left-0 right-0 bottom-custom bg-white z-30 transition-transform duration-300 ease-in-out rounded-t-2xl shadow-lg"
      :class="{
        'translate-y-full': !isBottomSheetVisible,
        'translate-y-0': isBottomSheetVisible,
      }"
      :style="{ height: '66vh', bottom: 49 }"
      v-if="isBottomSheetOpen"
    >
      <view class="flex justify-between items-center view p-2 border-b border-gray-200">
        <view class="text-lg font-bold text-gray-800">预约服务</view>
        <view
          class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-500"
          @click="closeBottomSheet"
        >
          <X class="w-5 h-5" />
        </view>
      </view>

      <view class="view p-2 overflow-y-auto" style="height: calc(66vh - 130px)">
        <view v-if="!isLoading">
          <view class="mbp-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="editor">
              请描述您的需求
            </label>
            <view
              class="rich-text-editor border border-gray-300 rounded-lg view p-3 min-h-[150px] focus:outline-none focus:border-orange-500"
              contenteditable="true"
              ref="editor"
            ></view>
          </view>

          <view class="mbp-4">
            <label class="block text-gray-700 text-sm font-bold mb-2">添加图片</label>
            <view class="flex items-center">
              <view
                class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 p-2 rounded-lg transition-colors flex items-center"
                @click="triggerImageUpload"
              >
                <Image class="wp-4 hp-4 mr-2" />
                上传图片
              </view>
              <input
                type="file"
                ref="imageInput"
                class="hidden"
                accept="image/*"
                @change="handleImageUpload"
              />
            </view>
          </view>

          <view class="mbp-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">联系人姓名</label>
            <input
              type="text"
              id="name"
              class="w-full border border-gray-300 rounded-lg view -2 focus:outline-none focus:border-orange-500"
              placeholder="请输入您的姓名"
            />
          </view>

          <view class="mbp-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">联系电话</label>
            <input
              type="tel"
              id="phone"
              class="w-full border border-gray-300 rounded-lg view -2 focus:outline-none focus:border-orange-500"
              placeholder="请输入您的电话号码"
            />
          </view>
        </view>

        <view v-else class="flex flex-col items-center justify-center h-[300px]">
          <view
            class="w-12 h-12 border p-2 border-gray-200 border-t-orange-500 rounded-full animate-spin"
          ></view>
          <view class="mt-4 text-gray-600">正在保存...</view>
        </view>

        <view class="p-4 border-gray-200">
          <view
            class="text-center bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 p-2 rounded-lg transition-colors"
            @click="saveForm"
            :disabled="isLoading"
          >
            保存
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Phone, Star, X, Image } from 'lucide-vue-next'

const merchantImage = ref(null)
const isHeaderSticky = ref(false)
const isBottomSheetVisible = ref(false)
const isBottomSheetOpen = ref(false)
const isLoading = ref(false)
const editor = ref(null)
const imageInput = ref(null)

const checkScroll = () => {
  if (!merchantImage.value) return

  const imageBottom = merchantImage.value.getBoundingClientRect().bottom
  isHeaderSticky.value = imageBottom <= 0
}

const openBottomSheet = () => {
  isBottomSheetOpen.value = true
  // Use setTimeout to ensure the DOM is updated before animation
  setTimeout(() => {
    isBottomSheetVisible.value = true
    // #ifdef H5
    document.body.style.overflow = 'hidden'
    // #endif
  }, 10)
}

const closeBottomSheet = () => {
  isBottomSheetVisible.value = false
  // #ifdef H5
  document.body.style.overflow = ''
  // #endif

  setTimeout(() => {
    isBottomSheetOpen.value = false
  }, 300)
}

const triggerImageUpload = () => {
  imageInput.value.click()
}

const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader()
    reader.onload = (e) => {
      // Insert image at cursor position or at the end of editor
      const image = document.createElement('image')
      image.src = e.target.result
      image.style.maxWidth = '100%'
      image.style.height = 'auto'
      image.style.margin = '10px 0'

      if (editor.value) {
        // Focus the editor
        editor.value.focus()

        // Insert the image at cursor position or at the end
        const selection = window.getSelection()
        if (selection.rangeCount > 0) {
          const range = selection.getRangeAt(0)
          range.insertNode(image)
          // Move cursor after the inserted image
          range.setStartAfter(image)
          range.setEndAfter(image)
          selection.removeAllRanges()
          selection.addRange(range)
        } else {
          editor.value.appendChild(image)
        }
      }
    }
    reader.readAsDataURL(file)
  }

  // Reset the input to allow selecting the same file again
  event.target.value = ''
}

const saveForm = () => {
  isLoading.value = true

  // Simulate API call with a 2-second delay
  setTimeout(() => {
    isLoading.value = false
    closeBottomSheet()
  }, 2000)
}

onMounted(() => {
  window.addEventListener('scroll', checkScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', checkScroll)
})

// Products data
const products = [
  {
    name: '专业咨询服务套餐（基础版）',
    price: '299.00',
    sales: '328',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '个性化定制方案（标准版）',
    price: '599.00',
    sales: '156',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: '全程跟踪服务（高级版）',
    price: '999.00',
    sales: '89',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
  {
    name: 'VIP专属定制服务（尊享版）',
    price: '1999.00',
    sales: '42',
    image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  },
]
</script>

<style scoped>
.bottom-custom {
  bottom: var(--window-bottom);
}

.rich-text-editor {
  min-height: 150px;
  background-color: white;
  overflow-y: auto;
}

.rich-text-editor:focus {
  outline: none;
  border-color: #f97316;
  /* orange-500 */
}

/* Ensure smooth animations */
.translate-y-full {
  transform: translateY(100%);
}

.translate-y-0 {
  transform: translateY(0);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
</style>
